.audio-warpper {
  width: 100%;
  max-width: 680px;
  min-width: 660px;
  margin: 0 auto;
  height: 110px;
  box-sizing: border-box;
  padding: 10px;
  background: #FFFFFF;
  box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.10);
  border-radius: 4px;
  moz-user-select: -moz-none;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .audio-img {
    width: 120px;
    float: left;

    .cover-img {
      width: 100%;
      padding-bottom: 75%;
      height: 0;
      background: rgb(235, 208, 194);
      position: relative;

      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }

  .rmrb-audio-player {
    width: 100%;
    box-sizing: border-box;
    padding-left: 130px;
    padding-right: 100px;
    height: 100%;
    line-height: 90px;

    .time-start {
      display: inline-block;
      margin-right: 5px;
      vertical-align: middle;
      width: 41px;
    }

    .audio-range {
      width: 75%;
      display: inline-block;
      position: relative;
      height: 4px;
      vertical-align: middle;


      .audio-range-totle {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        height: 4px;
        border-radius: 3px;
        width: 100%;
        background: #EDEEF0;
      }

      .audio-range-preload {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        height: 4px;
        width: 0%;
        border-radius: 3px;
        background: #aaa;
        transition: all 0.5s;
      }

      .audio-range-progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 4px;
        z-index: 2;
        border-radius: 3px;
        width: 0%;
        background: #E45928;
      }

      .audio-handle-btn {
        width: 16px;
        height: 16px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0%;
        background: #E45928;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30);
        border-radius: 50%;
        margin-left: -8px;
        z-index: 3;
      }
    }

    .time-end {
      margin-left: 5px;
      display: inline-block;
      width: 41px;
    }
  }

  .audio-paly {
    width: 15%;
    float: right;
    position: relative;
    height: 90px;

    .play-icon {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #E45928;
      border-radius: 50%;

      svg {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        path {
          fill: #FFFFFF
        }

      }
    }

    .pause-icon {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #E45928;
      border-radius: 50%;
      display: none;

      svg {
        width: 30px;
        height: 30px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        path {
          fill: #FFFFFF
        }

      }
    }
  }

  .play {

    .play-icon {
      display: none;
    }

    .pause-icon {
      display: block;
    }
  }
}